<template>
    <div class="main">
      <el-card>
          <h3>基础信息</h3>
          <el-form :model="queryForm" :rules="queryFormrules" ref="queryForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="项目图片" prop="massageImage">
                <image-upload :limit="1" v-model="queryForm.massageImage" />
              </el-form-item>
              <el-form-item label="项目名称" prop="massageName">
                  <el-input v-model="queryForm.massageName" placeholder="请输入项目名称"></el-input>
              </el-form-item>
              <el-form-item label="售价" prop="salePrice">
                  <el-input v-model="queryForm.salePrice" placeholder="请输入售价"></el-input>
              </el-form-item>
              <el-form-item label="划线价" prop="originalPrice">
                  <el-input v-model="queryForm.originalPrice" placeholder="请输入划线价"></el-input>
              </el-form-item>
             <el-form-item label="可核销次数" prop="serviceNum">
                <el-input-number v-model="queryForm.serviceNum" controls-position="right" @change="handleChange" :min="1"></el-input-number>
             </el-form-item>
              <h3>项目设置</h3>
              <div class="content">
                <p class="tit">项目内容</p>
                <div class="project-box">
                    <el-row>
                        <el-col :span="12">
                            <el-button type="primary" class="el-icon-plus" style="margin-bottom:20px" size="mini" @click="addDomain()">添加购买项</el-button>
                            <el-form-item
                            label-width="70px"
                                v-for="(domain, index) in queryForm.massageBuyItemList"
                                :label="'购买项'"
                                :key="domain.key"
                                :prop="queryForm.massageBuyItemList[index]"
                                :rules="{
                                  required: true, message: '内容不能为空', trigger: 'blur'
                                }"
                            >
                            
                            <el-input style="width:200px" v-model="queryForm.massageBuyItemList[index]"></el-input>
                            <el-button type="danger" icon="el-icon-delete" circle style="margin-left:20px" v-if="index!=0" @click.prevent="removeDomain(domain)"></el-button>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-button type="primary" class="el-icon-plus" style="margin-bottom:20px" size="mini" @click="addGifts()">添加赠送项</el-button>
                            <el-form-item
                            label-width="70px"
                                v-for="(giftsItem, index) in queryForm.massageGiftItemList"
                                :label="'赠送项'"
                                :key="index"
                                :prop="queryForm.massageGiftItemList[index] "
                                :rules="{
                                  required: true, message: '内容不能为空', trigger: 'blur'
                                }"
                            >
                            <el-input style="width:200px" v-model="queryForm.massageGiftItemList[index]"></el-input>
                            <el-button type="danger" icon="el-icon-delete" circle style="margin-left:20px" v-if="index!=0" @click.prevent="removeGifts(giftsItem)"></el-button>
                          </el-form-item>
                        </el-col>
                    </el-row>
                </div>
              </div>
              <h3>其他设置</h3>
              <el-form-item label="运费设置">
                <el-radio-group v-model="queryForm.isExpressFree" vertical>
                  <el-radio :label="true">包邮</el-radio>
                  <!-- <div class="flexStyle">
                    <el-radio label="2">运费模板</el-radio> 
                    <el-select v-model="value" placeholder="请选择" style="margin-left:20px;"> 
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div> -->
                  
                </el-radio-group>
              </el-form-item>
              <el-form-item label="上架设置" prop="setS">
                <el-switch
                class="switchStyle"
                v-model="queryForm.isSale"
                active-text="上架"
                inactive-text="下架"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="商品详情" prop="description">
              <Tinymce :height="200" v-model="queryForm.description"></Tinymce>
          </el-form-item>
          <el-button type="primary" @click="submit()">提交</el-button>
          </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import {addMassageItem} from '@/api/project'
  import Tinymce from "../goods/tinymce.vue";
  import imageUpload from '@/components/uploadImg'
  import { getToken } from '@/utils/auth'
  import baseUrl from '@/utils/config'
  export default {
    name: '',
    components: { imageUpload ,Tinymce},
    props: {},
    data() {
      return {
        tiny: {
            value: undefined,
        },
        fileData: {   // 接口需要的额外参数
          scene: 'GoodsImage'
        },
        headers: {  // 请求头部参数
            Authorization:'Bearer '+ getToken()
        },

        baseUrl,
            // options: [{
            // value: '选项1',
            // label: '黄金糕'
            // }, {
            // value: '选项2',
            // label: '双皮奶'
            // }, {
            // value: '选项3',
            // label: '蚵仔煎'
            // }, {
            // value: '选项4',
            // label: '龙须面'
            // }, {
            // value: '选项5',
            // label: '北京烤鸭'
            // }],
          queryForm:{
                massageImage:'',
                massageName:'',
                salePrice:'',
                originalPrice:'',
                serviceNum:1,
                isSale:true,
                isExpressFree:true ,
                expressTemplateId:null,
                description:'',
                massageBuyItemList:[''],
                massageGiftItemList:[''],
             
    
          },
          queryFormrules:{
              massageImage: [
                  { required: true, message: '请上传图片', trigger: 'blur' },
              ],
              massageName: [
                  { required: true, message: '请输入项目名称', trigger: 'blur' },
              ],
              salePrice: [
                  { required: true, message: '请输入售价', trigger: 'blur' },
              ],
              originalPrice: [
                  { required: true, message: '请输入划线价', trigger: 'blur' },
              ],
              description: [
                  { required: true, message: '请输入描述', trigger: 'blur' },
              ],
          },
          imageUrl:'',
          value:''
      }
    },
    watch: {},
    computed: {},
    methods: {
      handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
  
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        handleChange(value) {
            console.log(value);
        },

        submit(){
          this.$refs.queryForm.validate(async (valid, object) => {
            if (valid) {
              addMassageItem(this.queryForm).then(res=>{
              if(res.code == 200){
                const loading = this.$loading({
                  lock: true,
                  text: 'Loading',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
              });
              loading.close();
              this.$router.push('/project')
              this.$message({
                  message: res.message,
                  type: 'success'
              });
                
              }
            })
            } else {
              console.log('error submit!!');
              return false;
            }
 
          })
          console.log(this.queryForm)
        },
        addGifts(){
            this.queryForm.massageGiftItemList.push('');
        },
        addDomain(){
            this.queryForm.massageBuyItemList.push('');
        },
        removeDomain(item) {
            var index = this.queryForm.massageBuyItemList.indexOf(item)
            if (index !== -1) {
                this.queryForm.massageBuyItemList.splice(index, 1)
            }
        },
        removeGifts(item) {
            var index = this.queryForm.massageGiftItemList.indexOf(item)
            if (index !== -1) {
                this.queryForm.massageGiftItemList.splice(index, 1)
            }
        },
    },
    created() {},
    mounted() {}
  }
  </script>
  
  <style lang="scss" scoped>
      h3{
          position: relative;
          font-size: 16px;
          font-weight: normal;
          padding-left: 8px;
          margin-bottom: 20px;
      }
      h3::before{
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 2px;
          height: 16px;
          background: #1890ff;
      }
      h3::after{
          content: '';
          display: block;
          position: absolute;
          width: calc(100% - 90px) ;
          height: 1px;
          background: #ddd;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
      }
      .el-form-item {
          width: 500px;
      }
      ::v-deep  .el-upload{
          width: 100px;
          height: 100px;
          line-height: 100px;
          border: 1px solid #ddd;
      }
      .content{
        display: flex;
        justify-content: space-between;
        .tit{
            width: 80px;
            font-size: 14px;
            color: #606266;
            text-align: right;
        }
        .project-box{
            width: 100%;
            border: 1px solid #ddd;
            margin-left: 20px;
            padding: 20px;
            border-radius: 5px;
        }
      }
      ::v-deep .el-radio{
        display: block;
        margin:10px 0;
        }
        .flexStyle{
            display: flex;
        }
        ::v-deep .switchStyle .el-switch__label {
            position: absolute;
            display: none;
            color: #fff;
          }
          ::v-deep .switchStyle .el-switch__label--left {
            z-index: 9;
            left: 19px;
          }
          ::v-deep .switchStyle .el-switch__label--right {
            z-index: 9;
            left: -2px;
          }
          ::v-deep .el-switch__label.is-active {
            display: block;
          }
          ::v-deep .el-switch .el-switch__core,
          .el-switch .el-switch__label {
            width: 60px !important;
          }
  </style>